import React, { useRef } from 'react'

const VideoPlayer = ({ src })=>{
    const videoRef = useRef(null);

    const handleMouseOver = () => {
      if (videoRef.current) {
        videoRef.current.play();
      }
    };
  
    const handleMouseOut = () => {
      if (videoRef.current) {
        videoRef.current.pause();
        videoRef.current.currentTime = 0; // Optional: Reset video to start
      }
    };
  
    return (
      <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} style={{width:'100%',height:'100%'}}>
        <video  controls ref={videoRef} muted width="100%" height='100%'>
          <source src={src} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
    );
}

export default VideoPlayer
